<template>
	<view class="container">
		<image style="width: 138px;height: 138px;position: absolute;top:27px;right: 30px;"
			src="/static/images/my/zh.png"></image>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row class="device-name">
					<u--image style="margin-right: 7px;" src="/static/images/my/sbmc.png" width="13px"
						height="13px"></u--image>
					{{bindState?'已绑定' :'张元英'}}
				</u-row>
				<u-row class="device-status">
					<u--image style="margin-right: 7px;" src="/static/images/my/ljzt.png" width="13px"
						height="13px"></u--image>
					{{bindState?'已绑定' :'设备已连接'}}
				</u-row>
				<u-row class="device-status">
					<u--image style="margin-right: 7px;" src="/static/images/my/cdzt.png" width="13px"
						height="13px"></u--image>
					{{bindState?'已绑定' :'充电中'}}
					<u--image style="margin-left: 7px;" src="/static/images/my/cd90.png" width="26px"
						height="13px"></u--image>
				</u-row>
				<u-row class="device-status">
					<u--image style="margin-right: 7px;" src="/static/images/my/ljzt.png" width="13px"
						height="13px"></u--image>
					{{bindState?'已绑定' :'AA:AB:B5:98:74:9C'}}
				</u-row>
				<u-button class="my-button" plain @click="skipPage('Binding')">
					<u--image src="/static/images/my/jb.png" width="13px" height="13px"></u--image>
					解除绑定
				</u-button>
			</view>
		</view>
		<view class="card" v-for="i in cardList" :key="i.title" @click="skipPage(i.page)">
			<u-row>
				<u-col :span="6">
					<u-row>
						<image style="width: 18px;height: 18px;margin-right: 8px;" :src="i.icon"></image>
						{{ i.title }}
						<span style="font-size: 12px;margin-left: 8px;" v-if="i.title == '检查更新'">V1.0.1</span>
					</u-row>
				</u-col>
				<u-col class="sub-title" textAlign="right" :span="6">
					<u-row justify="flex-end">
						{{ i.subTitle }}
						<view class="sub-title-badge">
							<u-badge v-if="i.title == '固件升级'" :absolute="true" :offset="[0, -4]" :isDot="true"
								color="#FF2B2C"></u-badge>
							<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
						</view>
					</u-row>
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script>
	import userApi from "@/api/user.js"
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				bindState: false,
				cardList: [{
					title: '操作说明',
					icon: require("../../static/images/my/czsm.png"),
					subTitle: '',
				}, {
					title: '信息设置',
					icon: require("../../static/images/my/xxsz.png"),
					subTitle: '',
				}, {
					title: '采集周期设置',
					icon: require("../../static/images/my/cjzq.png"),
					subTitle: ''
				}, {
					title: '更改蓝牙名称',
					icon: require("../../static/images/my/gglymc.png"),
					subTitle: ''
				}, {
					title: '恢复出厂设置',
					icon: require("../../static/images/my/hfccsz.png"),
					subTitle: ''
				}, {
					title: '固件升级',
					icon: require("../../static/images/my/gjsj.png"),
					subTitle: '发现新版本'
				}],
			}
		},
		components: {},
		onLoad() {},
		computed: {
			...mapGetters(["userInfo"]),
		},
		methods: {
			skipPage(page) {
				if (!page) return;
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				})
			},

		}
	}
</script>
<style lang="scss">
	.container {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 12px;
		box-sizing: border-box;

		.jkzs-border {
			margin-bottom: 12px !important;

			.jkzs {
				height: auto !important;
				gap: 5px !important;
			}
		}


		.device-name {
			width: 70px;
			font-weight: bold;
			font-size: 16px;
			color: #FFD8BB;
			white-space: nowrap;
		}

		.device-status {
			width: 70px;
			font-weight: 500;
			font-size: 14px;
			white-space: nowrap;
		}

		.my-button {
			width: 94px;
			margin: 5px 0px 0px 0px;
			background-color: transparent;
			height: 32px;
			border-radius: 6px;
			border: 1px solid #FFD8BB;
			font-weight: 500;
			font-size: 12px;
			color: #FFD8BB !important;

			::v-deep .u-image {
				margin-right: 5px;
			}
		}

		.card {
			width: 100%;
			background: #1B1B1B;
			border-radius: 12px;
			margin-bottom: 12px;
			padding: 17px;
			box-sizing: border-box;

			.number {
				height: 36px;
				font-size: 30px;
				color: #FFD8BB;
				line-height: 36px;
				padding: 8px 3px;

				span {
					height: 20px;
					font-weight: 600;
					font-size: 14px;
					line-height: 20px;
					margin-left: 2px;
				}
			}

			::v-deep .u-icon {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				justify-content: center;
				background: linear-gradient(180deg, #242820 0%, #171314 100%);
				border: 0px solid;
				border-image: linear-gradient(180deg, rgba(126, 116, 94, 1), rgba(24, 20, 21, 1)) 0 0;
			}

			.sub-title {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				line-height: 17px;
				text-align: left;


				.sub-title-badge {
					position: relative;

					.u-badge {
						width: 6px;
						height: 6px;
					}
				}
			}
		}
	}
</style>